<template>
 <div class="home">
   <div class="main">
    <!-- 二级路由渲染 -->
    <router-view></router-view>
   </div>
   <ul class="bottom_bar">
       <router-link tag="li" to="/films">
          <i class="fa fa-video-camera"></i><br>
          电影
       </router-link>
       <router-link tag="li" to=/cinemas>
          <i class="fa fa-film"></i><br>
          影院
       </router-link>
       <router-link tag="li" to="/center">
          <i class="fa fa-user"></i><br>
          我的
       </router-link>
   </ul>
 </div>
</template>

<script>
import { movieOnInfoList, comingList, cinemaList } from '../api/Moves.js'
export default {
  data () {
    return {
      movieIds: [],
      movieList: []
    }
  },
  created () {
    movieOnInfoList().then(res => {
      console.log(res.data)
      this.movieIds = res.data.movieIds
      this.movieList = res.data.movieList
    })
    comingList().then(res => {
      console.log(res.data)
    })
    cinemaList().then(res => {
      console.log(res.data)
    })
  }
}
</script>

<style lang="scss">
  .home{
    display: flex;
    flex-direction: column;
    height:100%;
    .main{
      flex: 1;
    }
    .bottom_bar{
      width: 100%;
      height:48px;
      line-height: 20px;
      background: #fff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      li{
        text-align: center;
      }
    }
  }
  .router-link-active{
    color:#f03d37;
  }
</style>
